<template>
  <div class="simple-map-test">
    <h2>简单地图测试</h2>
    <div class="controls">
      <el-button @click="testMap" type="primary">测试地图</el-button>
      <el-button @click="loadRealData" type="success">加载真实数据</el-button>
      <span class="status">{{ status }}</span>
    </div>
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SimpleMapTest',
  data() {
    return {
      mapInstance: null,
      status: '未初始化'
    }
  },

  methods: {
    async testMap() {
      this.status = '正在测试...'
      
      try {
        // 注册简单地图数据
        const simpleMapData = {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: { name: '北京' },
              geometry: {
                type: 'Polygon',
                coordinates: [[[115.5, 39.5], [117.5, 39.5], [117.5, 41.0], [115.5, 41.0], [115.5, 39.5]]]
              }
            },
            {
              type: 'Feature',
              properties: { name: '上海' },
              geometry: {
                type: 'Polygon',
                coordinates: [[[120.8, 30.8], [122.2, 30.8], [122.2, 31.8], [120.8, 31.8], [120.8, 30.8]]]
              }
            },
            {
              type: 'Feature',
              properties: { name: '广东' },
              geometry: {
                type: 'Polygon',
                coordinates: [[[109.5, 20.0], [117.5, 20.0], [117.5, 25.5], [109.5, 25.5], [109.5, 20.0]]]
              }
            }
          ]
        }
        
        echarts.registerMap('china', simpleMapData)
        console.log('地图数据注册成功')
        
        // 创建图表实例
        if (this.mapInstance) {
          this.mapInstance.dispose()
        }
        this.mapInstance = echarts.init(this.$refs.mapContainer)
        
        // 配置选项
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%'
          },
          visualMap: {
            min: 60,
            max: 95,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            inRange: {
              color: ['#67c23a', '#e6a23c', '#f56c6c']
            }
          },
          series: [
            {
              name: '利用率',
              type: 'map',
              map: 'china',
              roam: true,
              data: [
                { name: '北京', value: 76 },
                { name: '上海', value: 85 },
                { name: '广东', value: 90 }
              ]
            }
          ]
        }
        
        this.mapInstance.setOption(option)
        this.status = '测试成功'
        this.$message.success('地图测试成功')
        
      } catch (error) {
        console.error('测试失败:', error)
        this.status = '测试失败: ' + error.message
        this.$message.error('地图测试失败')
      }
    },

    async loadRealData() {
      this.status = '正在加载真实数据...'
      
      try {
        const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
        if (!response.ok) {
          throw new Error('网络请求失败')
        }
        
        const chinaMapData = await response.json()
        echarts.registerMap('china', chinaMapData)
        console.log('真实地图数据加载成功')
        
        // 创建图表实例
        if (this.mapInstance) {
          this.mapInstance.dispose()
        }
        this.mapInstance = echarts.init(this.$refs.mapContainer)
        
        // 配置选项
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%'
          },
          visualMap: {
            min: 60,
            max: 95,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            inRange: {
              color: ['#67c23a', '#e6a23c', '#f56c6c']
            }
          },
          series: [
            {
              name: '利用率',
              type: 'map',
              map: 'china',
              roam: true,
              data: [
                { name: '北京市', value: 76 },
                { name: '上海市', value: 85 },
                { name: '广东省', value: 90 },
                { name: '江苏省', value: 82 },
                { name: '浙江省', value: 73 },
                { name: '四川省', value: 68 },
                { name: '山东省', value: 75 },
                { name: '河北省', value: 69 },
                { name: '湖北省', value: 79 },
                { name: '辽宁省', value: 65 }
              ]
            }
          ]
        }
        
        this.mapInstance.setOption(option)
        this.status = '真实数据加载成功'
        this.$message.success('真实地图数据加载成功')
        
      } catch (error) {
        console.error('加载真实数据失败:', error)
        this.status = '加载失败: ' + error.message
        this.$message.error('加载真实数据失败')
      }
    }
  },

  beforeUnmount() {
    if (this.mapInstance) {
      this.mapInstance.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.simple-map-test {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
  }
  
  .controls {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    
    .status {
      color: #606266;
      font-size: 14px;
    }
  }
  
  .map-container {
    width: 100%;
    height: 500px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
}
</style>
